<template>
    <div class="system-settings">
        <h1>系统设置</h1>

        <!-- 系统设置按钮区域 -->
        <div class="button-group">
            <!-- 关闭无痕按钮 -->
            <a-button @click="toggleIncognito" type="primary">
                {{ isIncognito ? '开启无痕' : '关闭无痕' }}
            </a-button>

            <!-- 上传背景图片按钮 -->
            <a-upload v-model:file-list="fileList" name="avatar" :action="uploadUrl" 
                @change="handleChange" :show-upload-list="false">
                <a-button>
                    <upload-outlined></upload-outlined>
                    上传背景图片
                </a-button>
            </a-upload>
        </div>

        <!-- 背景图片预览 -->
        <div v-if="backgroundImage" class="background-preview">
            <img :src="backgroundImage" alt="背景图片" class="preview-image" />

            <!-- 上传后显示保存按钮 -->
            <a-button v-if="backgroundImage" type="primary" @click="saveImage" style="margin-top: 20px;">
                保存图片
            </a-button>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import { message } from 'ant-design-vue';
import { updateUserInfoApi } from '@/api/user'; // 假设 updateUserInfoApi 是从 api 中引入的
import { notification } from 'ant-design-vue'; // 导入通知组件
const isIncognito = ref(false); // 存储无痕模式的状态
const backgroundImage = ref(null); // 存储背景图片的 URL
const fileList = ref([]); // 存储文件列表
const isImageSaved = ref(false); // 图片是否已保存

// 上传图片的接口地址
const uploadUrl = '/api/file/fileUpload'; // 您可以替换成实际的上传接口URL



// 处理上传文件状态变化
const handleChange = (info) => {
    if (info.file.status === 'uploading') {
        console.log('正在上传:', info.file, info.fileList);
    }

    if (info.file.status === 'done') {
        // 获取响应数据中的图片URL
        const response = info.file.response;
        if (response.code === 200 && response.data) {
            backgroundImage.value = response.data; // 提取图片URL
            message.success(`${info.file.name} 上传成功`);
        } else {
            message.error('上传成功但未返回图片URL');
        }
    }

    if (info.file.status === 'error') {
        message.error(`${info.file.name} 上传失败`);
    }
};

// 切换无痕模式
const toggleIncognito = () => {
    isIncognito.value = !isIncognito.value;
    message.success(isIncognito.value ? '开启无痕模式' : '关闭无痕模式');
};

// 保存图片的请求
const saveImage = async () => {
    if (backgroundImage.value) {
        try {
            // 调用保存图片的接口
            const response = await updateUserInfoApi(backgroundImage.value);
            if (response.code === 200) {
                message.success('图片已保存');
                isImageSaved.value = true;
            } else {
                message.error('图片保存失败');
            }
        } catch (error) {
            message.error('图片保存失败');
        }
    } else {
        message.error('没有可保存的图片');
    }
};
</script>

<style scoped>
.system-settings {
    padding: 20px;
}

h1 {
    margin-bottom: 20px;
}

.button-group {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}

.background-preview {
    position: relative;
    text-align: center;
}

.preview-image {
    max-width: 100%;
    max-height: 400px;
    border-radius: 8px;
    display: block;
    margin: 0 auto;
}

/* 保存按钮 */
a-button {
    display: inline-block;
    margin-top: 20px;
}
</style>
